<template>
	<view class="zone">
		<Header title="成就奖励"></Header>
		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<view class="stabs">
				<view class="tabs">
					<view :class="['tab',stat==item.id?'act':'']" v-for="(item,index) in tablist" :key="index"
						@click="changeTab(item.id)">
						{{item.name}}
					</view>
				</view>
			</view>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="box">
				<view class="info" v-if="stat==1">
					<view class="link" v-for="(item,index) in list" :key="index">
						<view class="tname">
							境界达到{{item.content}}期
						</view>
						<view class="midbox">
							奖励：{{item.reward}}
							<image class="hongbao" src="http://image.qxgm.site/tdz/img/active/3.png" mode="widthFix">
							</image>
						</view>

						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							:class="[item.state== 1 ?'receive':'receive2']" v-if="item.state == 0 || item.state == 1"
							@click="linkwold1(item)">
							{{item.state == 0 ? '未完成' : '领取'}}
						</u-button>

						<image v-else class="lingqued" src="http://image.qxgm.site/tdz/img/active/9.png"
							mode="widthFix"></image>
					</view>
				</view>
				<view class="info" v-else>
					<view class="link" v-for="(item,index) in list2" :key="index">
						<view class="tname">
							等级达到{{item.level}}级
						</view>
						<view class="midbox">
							奖励：{{item.number}}
							<image class="hongbao" src="http://image.qxgm.site/tdz/img/active/3.png" mode="widthFix">
							</image>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							:class="[item.state== 1 ?'receive':'receive2']" v-if="item.state == 0 || item.state == 1"
							@click="linkwold2(item)">
							{{item.state == 0 ? '未完成' : '领取'}}
						</u-button>
						<image v-else class="lingqued" src="http://image.qxgm.site/tdz/img/active/9.png"
							mode="widthFix"></image>
					</view>

				</view>
			</view>
		</view>
		<!-- 恭喜获得  -->
		<u-mask :show="obtain" @click="obtain = false">
			<view class="warp2" @tap.stop>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/youchai/mg-7.png" mode="widthFix"></image>
				<view class="mask_content2">
					<view class="m_info2">
						<view class="plist">
							<view class="parts">
								<view class="sbimg">
									<image class="tanimg" src="http://image.qxgm.site/tdz/img/active/3.png"
										mode="widthFix">
									</image>
								</view>
								<view class="toan">
									零钱x{{stat == 1 ? goods.reward : goods.number}}
								</view>
							</view>
						</view>
						<view class="refineCon2" @click="obtain=false">确定</view>
					</view>
				</view>
				<image class="mask3" src="http://image.qxgm.site/tdz/img/youchai/mg-9.png" mode="widthFix"></image>
				<view class="dianjireny" @click="obtain = false">
					点击任意位置退出
				</view>
			</view>
		</u-mask>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
						id: 1,
						name: '境界成就',
						isrequest: false,
					},
					{
						id: 2,
						name: '游戏成就',
						isrequest: false,
					},
				],
				stat: 1,
				list: [],
				list2: [],
				userinfo: {},
				goods: {},
				obtain: false
			}
		},
		onLoad() {
			this.taskgrade()
			
		},
		methods: {

			//境界奖励列表
			async taskgrade() {
				let res = await this.$http.index.taskgrade()
				if (res.code == 1) {
					this.list = res.data.list
				}
			},
			//等级奖励列表
			async taskgame() {
				let res = await this.$http.index.shenshiGamereword()
				if (res.code == 1) {
					this.list2 = res.data
				}
			},
			async linkwold1(item) {
				if (item.state == 0) {
					this.$u.toast('您还未完成')
				} else if (item.state == 1) {
					let res = await this.$http.index.guidetaskRece({
						user_task_id: item.user_task_id
					})

					if (res.code == 1) {
						this.taskgrade();
						this.goods = item
						this.obtain = true
					} else {
						this.$u.toast(res.msg)
					}
				}
			},

			async linkwold2(item) {
				if (item.state == 0) {
					this.$u.toast('您还未完成')
				} else if (item.state == 1) {
					let res = await this.$http.index.shenshiGameReceive({
						level: item.level
					})

					if (res.code == 1) {
						this.taskgame()
						this.goods = item
						this.obtain = true
					} else {
						this.$u.toast(res.msg)
					}
				}
			},
			// 切换
			changeTab(id) {
                if(id==1 && this.list.length == 0){
                    this.taskgrade()
                }
                if(id==2 && this.list2.length == 0){
                    this.taskgame()
                }
                this.stat = id
			},

		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.main {
		width: 100%;
		position: relative;
	}

	.plist {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 14px;

		.parts {
			width: 25%;
			box-sizing: border-box;
		}

		.sbimg {
			width: 64px;
			padding: 9px 5px;
			background: url(http://image.qxgm.site/tdz/img/liandan/mg-12.png) no-repeat;
			background-size: 100% 100%;
			margin: auto;
		}

		.quality1 {
			width: 64px;
			padding: 9px 5px;
			position: relative;
			background: url(http://image.qxgm.site/tdz/img/quality/1.png) no-repeat;
			background-size: 100% 100%;
			margin: auto;
		}

		.quality2 {
			width: 64px;
			padding: 9px 5px;
			position: relative;
			background: url(http://image.qxgm.site/tdz/img/quality/2.png) no-repeat;
			background-size: 100% 100%;
			margin: auto;
		}

		.quality3 {
			width: 64px;
			padding: 9px 5px;
			position: relative;
			background: url(http://image.qxgm.site/tdz/img/quality/3.png) no-repeat;
			background-size: 100% 100%;
			margin: auto;
		}

		.quality4 {
			width: 64px;
			padding: 9px 5px;
			position: relative;
			background: url(http://image.qxgm.site/tdz/img/quality/4.png) no-repeat;
			background-size: 100% 100%;
			margin: auto;
		}

		.quality5 {
			width: 64px;
			padding: 9px 5px;
			position: relative;
			background: url(http://image.qxgm.site/tdz/img/quality/5.png) no-repeat;
			background-size: 100% 100%;
			margin: auto;
		}

		.quality6 {
			width: 64px;
			padding: 9px 5px;
			position: relative;
			background: url(http://image.qxgm.site/tdz/img/quality/6.png) no-repeat;
			background-size: 100% 100%;
			margin: auto;
		}

		.tanimg {
			width: 100%;
		}

		.toan {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-top: 12px;
			text-align: center;
		}

	}

	.yun {
		width: 44%;
	}

	.ping1 {
		width: 100%;
		display: flex;
	}

	.info {
		height: calc(100vh - 196px);
		overflow-y: scroll;
	}

	.box {
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 9px 6px;
	}

	.tabs {
		width: 86%;
		padding: 8px 16px;
		display: flex;
		align-items: center;
		background: url(http://image.qxgm.site/tdz/img/lingchong/mg-04.png) no-repeat;
		background-size: 100% 100%;

		.tab {
			width: 33%;
			background: url(http://image.qxgm.site/tdz/img/public/tab2.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			color: #FFFED0;
			line-height: 27px;
			margin-right: 5px;
		}

		.act {
			color: #A97D45;
			background: url(http://image.qxgm.site/tdz/img/public/tab1.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
		background-size: 100% 100%;
		height: 64px;
		padding: 0 12px 0 18px;
		box-sizing: border-box;
		margin-bottom: 4px;
	}

	.receive {
		display: block;
		width: 75px;
		font-size: 13px;
		height: 33px;
		font-weight: normal;
		text-align: center;
		color: #f9e5b6;
		line-height: 33px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}

	.receive2 {
		display: block;
		width: 75px;
		font-size: 13px;
		height: 33px;
		font-weight: normal;
		text-align: center;
		color: #f9e5b6;
		line-height: 33px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/youchai/mg-03.png) no-repeat;
		background-size: 100% 100%;
	}


	.lingqued {
		width: 75px;
	}

	.hongbao {
		width: 22px;
	}

	.midbox {
		display: flex;
		align-items: center;
		font-size: 14px;
		font-weight: normal;
		color: #B76A6C;
		line-height: 18px;
	}

	.tname {
		font-size: 14px;
		font-weight: normal;
		color: #333333;
		line-height: 16px;
	}

	.received {
		filter: grayscale(100%);
		display: block;
		width: 75px;
		font-size: 13px;
		height: 33px;
		font-weight: normal;
		text-align: center;
		color: #f9e5b6;
		line-height: 33px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}

	.refineCon2 {
		display: block;
		margin: 23px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 37px;
		text-align: center;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}
</style>